<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">
        <strong>用户信息</strong>
        <span class="layui-layout-right" style="padding-right: 30px;">
            <button class="pear-btn pear-btn-primary pear-btn-sm layui-hide" lay-on="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-on="changePassword"><i class="layui-icon layui-icon-edit"></i>修改密码</button>
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-on="updateProfile"><i class="layui-icon layui-icon-upload"></i>更新图像</button>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm10">
                <div id="descriptions"></div>
            </div>
            <div class="layui-col-xs12 layui-col-sm2" style="margin-top: 30px;">
                <a href="javascript:window.profile();" title="点击更新图像">
                    <img id="userAvatar" alt="" src="" style="width: auto; height: auto; max-width: 140px; max-height: 140px;">
                </a>
            </div>
        </div>
    </div>
</div>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['jquery', 'descriptions', 'dict', 'util'], function() {
        let $ = layui.jquery;
        let desc = layui.descriptions;
        let dict = layui.dict;
        let util = layui.util;
        let url = layui.url();
        let id = url.search.id;

        $.get('/vtl-user/detail/' + id, function(result) {
            if(result.profilePicture) {
                $('#userAvatar').attr('src', result.profilePicture);
            } else {
                $('#userAvatar').attr('src', $.vtl.getRootPath() + '/admin/images/profile.jpg');
            }

            desc.render({
                elem: '#descriptions',
                fieldNum: 2,
                //url: '/vtl-user/detail/' + id,
                data: result,
                cols: [
                    { field: 'id', title: 'ID', hide: true },
                    { field: 'username', title: '登录账号' },
                    { field: 'password', title: '用户密码', hide: true, templet: function(d) {
                        return '********';
                    }},
                    { field: 'nickname', title: '用户昵称' },
                    { field: 'gender', title: '性别', templet: function(d) {
                        return dict.label('vtl_user_gender', d.gender, true);
                    }},
                    { field: 'idCardNumber', title: '身份证号' },
                    { field: 'mobilePhone', title: '电话' },
                    { field: 'email', title: '邮箱' },
                    { field: 'disabled', title: '账号状态', templet: function(d) {
                        return dict.label('vtl_disabled', d.disabled, true);
                    }},
                    { title: '用户部门', newline: true, templet: function(d) {
                        return d.deptList
                            .map(dept => { return '<span class="layui-badge layui-bg-green">' + dept.name + '</span>'; })
                            .join(' ');
                    }},
                    { title: '用户岗位', templet: function(d) {
                        return d.postList
                            .map(post => { return '<span class="layui-badge layui-bg-green">' + post.name + '</span>'; })
                            .join(' ');
                    }},
                    { title: '用户角色', newline: true, templet: function(d) {
                        return d.roleList
                            .map(role => { return '<span class="layui-badge layui-bg-green">' + role.name + '</span>'; })
                            .join(' ');
                    }},
                    { field: 'createByName', title: '创建者', newline: true },
                    { field: 'createTime', title: '创建时间', templet: function (d) {
                        return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'updateByName', title: '更新者' },
                    { field: 'updateTime', title: '更新时间', templet: function (d) {
                        return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                ]
            });
        });

        // 处理属性 为 lay-on 的所有元素事件
        util.on('lay-on', {
            edit: function(){
                window.edit(id);
            },
            updateProfile: function(){
                window.profile(id);
            },
            changePassword: function(){
                window.changePassword(id);
            }
        });

        window.edit = function(id) {
            let url = 'edit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
            $.vtl.openLayer(url, { title: '编辑' });
        }

        window.changePassword = function(id) {
            let url = 'changePassword.html?id=' + id;
            $.vtl.openLayer(url, { title: '修改密码' });
        }


        window.profile = function() {
            let _this = this;
            let success = function(layero, index, that) {
                // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.init($('#userAvatar').attr('src'));
            };
            let yes = function(index, layero, that) {
                // var $body = layui.layer.getChildFrame('body', index);
                // var $sourceImage = layui.layer.getChildFrame('#sourceImage', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                let img = iframeWin.save();

                $.post('/vtl-user/updateProfile/' + id, { profilePicture: img }, function(result) {
                    if(result.code == 200) {
                        $('#userAvatar').attr('src', img);
                        layer.close(index);
                    }
                });
            };
            $.vtl.openCopper(success, yes);
        }
    })
</script>
</body>
</html>
